/* vue3常用transition效果*/

/* 简单（基础方法） */

/* 进入前*/
.easy-enter-from {
    opacity: 0;
    transform: translateY(-10px);
}
/* 进入的这个阶段*/
.easy-enter-active {
    transition: all 0.3s ease;
}
/* 进入后*/
.easy-enter-to {
    transform: translateY(0px);
    opacity: 1;
}
/* 离开前*/
.easy-leave-from {
    opacity: 1;
}
/* 离开的这个阶段*/
.easy-leave-active {
    transition: all 0.3s ease;
}
/* 离开后*/
.easy-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}

.fade-down-enter-active,
.fade-down-leave-active,
.fade-up-enter-active,
.fade-up-leave-active {
    transition: all 0.3s ease;
}

/* 淡入淡出-下 */
.fade-down-enter-from,
.fade-down-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}
.fade-down-enter-to,
.fade-down-leave-from {
    transform: translateY(0px);
    opacity: 1;
}

/* 淡入淡出-上 */
.fade-up-enter-from,
.fade-up-leave-to {
    transform: translateY(10px);
    opacity: 0;
}
.fade-up-enter-to,
.fade-up-leave-from {
    transform: translateY(0px);
    opacity: 1;
}
